<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>监控中心 - 仓库管理</title>

    <!-- Bootstrap Core CSS -->
    <link href="${request.getContextPath()}/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${request.getContextPath()}/public/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${request.getContextPath()}/public/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!--嵌入头部跟菜单-->
        <#include "/admin/inc/menu.html"/>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-10">
                        <h4 class="page-header">编辑摄像头信息 —— 仓库名称：${warehouse.name}</h4>
                    </div>
                </div>
        <!-- /.row -->
                <div class="row">
                    <div class="col-lg-4">
                        <form id="myform" role="form" method="post" action="${request.getContextPath()}/admin/camera/submitUpdate.do" onsubmit="return checkFormValue(this)">

                            <input type="hidden" name="id" value="${camera.id}">
                            <input id="hidden_coverImageUrl" type="hidden" name="coverImageUrl" value="${camera.coverImageUrl}">

                            <div class="form-group">
                                <label>摄像头名称</label>
                                <input class="form-control" name="name" type="text" value="${camera.name}" required autofocus>
                            </div>

                            <div class="form-group">
                                <label>IP或域名</label>
                                <input class="form-control" name="ip" type="text" value="${camera.ip}" required>
                            </div>

                            <div class="form-group">
                                <label>WEB预览端口</label>
                                <input class="form-control" name="webPort" type="number" value="${camera.webPort?c}" required>
                            </div>


                            <div class="form-group">
                                <label>程序控制端口</label>
                                <input class="form-control" name="severPort" type="number" value="${camera.severPort?c}" required>
                            </div>

                            <div class="form-group">
                                <label>访问账号</label>
                                <input class="form-control" name="account" type="text" value="${camera.account}" required>
                            </div>


                            <div class="form-group">
                                <label>访问密码</label>
                                <input class="form-control" name="password" type="text" value="${camera.password}" required>
                            </div>

                            <div class="form-group">
                                <label>海康设备序列号</label>
                                <input class="form-control" name="serialNumber" type="text" value="${camera.serialNumber}" required>
                            </div>

                            <div class="form-group">
                                <label>萤石云m3u8地址</label>
                                <input class="form-control" name="m3u8" type="text" value="${camera.m3u8}" required>
                            </div>

                            <button type="submit" class="btn btn-primary">提交</button>
                            <a href="${request.getContextPath()}/admin/camera/listByWh.do?whId=${warehouse.id}" class="btn btn-default " id="reset">取消</a>
                            <button type="button" class="btn btn-danger" onclick="return delCamera('${camera.id}');">删除</button>
                        </form>
                    </div>

                    <div class="col-lg-2">
                        <div style="padding-top: 200px">
                            <button class="btn btn-primary btn-lg" onclick="createCoverImage();">生成封面图</button>
                            <p></p>
                            <button class="btn btn-primary btn-lg" onclick="$('#upload_file').click();">上传封面图</button>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <a href="#"> <img id="cover_img" class="img-responsive" src="${camera.coverImageUrl}"></a>
                            </div>
                            <div class="panel-footer">
                                <div class="row">
                                    <div class="col-lg-10">封面图片</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        <!-- /.row -->
                
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!--图片上传表单-->
    <form id="form-upload" method="post" action="#" enctype="multipart/form-data" style="display: none">
        <input type="file" name="upload_file" id="upload_file" onchange="submitUploadFile(this);">
    </form>


    <!-- jQuery -->
    <script src="${request.getContextPath()}/public/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${request.getContextPath()}/public/dist/js/sb-admin-2.js"></script>

    <script src="${request.getContextPath()}/public/js/ajaxfileupload.js"></script>


    <script>

        function submitUploadFile(dom){

            var filePath = dom.value;

            if(filePath=="") return;

            //ajax 提交
            $.ajaxFileUpload({
                url :"${request.getContextPath()}/admin/upload/uploadFiles.do", // 需要链接到服务器地址
                secureuri : false,
                fileElementId : "upload_file", // 文件选择框的id属性
                dataType : 'json', // 服务器返回的格式，可以是json
                success : function(data,status)
                {
                    var dd = eval('('+data+')');
                    var code =  dd.code;
                    var msg = dd.msg;
                    if(code==1){

                        var imageUrl = dd.data;

                        //显示封面图
                        $("#cover_img").hide().attr('src', imageUrl+'?' + Math.floor(Math.random()*100) ).fadeIn();
                        event.cancelBubble=true;

                        //设置表单内容
                        $("#hidden_coverImageUrl").val(imageUrl);

                    }else{

                        alert(msg);
                    }
                },
                error : function(data, status, e)
                {
                    alert(e);
                }
            });
        }

        function checkFormValue(form){

            //post 提交表单
            $.post(form.action,$("#myform").serialize(),function(data){

                alert(data.msg);

            },"json");

            return false;
        }


        //生成封面图片
        function createCoverImage(){

            //检查ip、server 端口、 账号、密码 是否填写
            var ip=$("input[name='ip']").val();
            var severPort=$("input[name='severPort']").val();
            var account=$("input[name='account']").val();
            var password=$("input[name='password']").val();

            if(ip==""){

                alert("摄像头ip不能为空");

                return false;
            }

            if(severPort==""){

                alert("摄像头程序控制端口不能为空");

                return false;
            }

            if(account==""){

                alert("摄像头访问账号不能为空");

                return false;
            }

            if(password==""){

                alert("摄像头访问密码不能为空");

                return false;
            }


            var url ="${request.getContextPath()}/admin/camera/createCapture.do";

            //提交请求
            $.post(url,$("#myform").serialize(),function(data){

                //alert(data.msg);

                if(data.code==0){

                    alert(data.msg);

                    return;
                }

                var imageUrl=data.data;

                $("#cover_img").hide().attr('src', imageUrl+'?' + Math.floor(Math.random()*100) ).fadeIn();
                event.cancelBubble=true;

                $("#hidden_coverImageUrl").val(imageUrl);

            },"json");

        }


        //删除摄像头
        function delCamera(id){

            if(confirm("是否确认删除该摄像头？")){

                var url="${request.getContextPath()}/admin/camera/del.do";

                $.post(url,{id:id},function(data){

                    alert(data.msg);

                    location.href="${request.getContextPath()}/admin/camera/listByWh.do?whId=${warehouse.id}";

                },"json");
            }

            return false;

        }

    </script>



</body>

</html>
